<template>
  <van-overlay :show="isShow"  :lock-scroll="false" :z-index="1000">
    <div class="flex_center" style="height: 100vh">
      <div class="mask flex_center flex_c ">
        <div class="mask_cont" ref="generateImg">
          <!-- list.find(item => item.card_type === current).title -->
          <div class="title">{{ title }}</div>
          <div class="line_box mb-12">
            <img class="cont_icon" src="../../assets/cont_icon.png" alt="">
          </div>
          <div class="inner_cont">{{ content }}</div>
          <div class="line_box line_box1 mt-12">
            <img class="cont_icon" src="../../assets/cont_icon1.png" alt="">
          </div>
          <div class="opt flex_center">
            <img @click="getPoster" class="opt_btn mr-20" src="../../assets/save_btn.png">
            <img class="opt_btn" @click="isShowShare = true" src="../../assets/share_btn.png">
          </div>
        </div>
        <img class="close" @click="$emit('update:isShow', false)" src='https://content.daylucky.cn/admin/image/pg09q2cg551irdq5847ufixb.png' />
      </div>
    </div>
    <Poster v-model:isShow="isShowPoster" :owned="owned" :title="title" :content="content" />
    
    <ShareMask v-model:isShow="isShowShare" />
  </van-overlay>
</template>
<script>
import Poster from '@/components/Poster'
import ShareMask from '@/components/ShareMask'
import { Overlay, Toast } from 'vant';
export default {
  components: {
    ShareMask,
    Poster,
    [Overlay.name]: Overlay,
  },
  props: {
    isShow: {
      type: Boolean,
      default: false
    },
    owned: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    content: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      isShowShare: false,
      loading: null,
      isShowPoster: false,
    }
  },
  methods: {
    getPoster() {
      this.isShowPoster = true
    },
  
  }
}
</script>
<style lang="scss" scoped src='../../style/mask.scss'></style>